<template>
<div class="acquisition-task">
    <el-card v-if="filterTaskList.length" class="planList" v-for="(item, index) in filterTaskList" :key="index">
        <h1>
            <el-button v-if="currentTask.value.id === item.id" type="success" :loading="loading" size="mini" @click="handleCurrentTask(item)">当前</el-button>

            <el-button v-else type="primary" size="mini" :loading="loading" @click="handleCurrentTask(item)">选择</el-button>
            <span class="title" v-if="currentTask.value.id === item.id" style="
            padding: 0;
            font-size: 18px;
            margin-top: 5px;
            font-weight: bold;
            display: block;
            color: red;
          ">{{ item.planName }}</span>
            <span class="title" v-else>{{ item.planName }}</span>
        </h1>
        <ul>
            <li>
                <strong>任务开始时间：</strong>
                <time :datetime="item.planStartTime">{{
            item.planStartTime | formatDate
          }}</time>
            </li>
            <li>
                <strong>任务结束时间：</strong>
                <time :datetime="item.planEndTime">{{
            item.planEndTime | formatDate
          }}</time>
            </li>
            <li class="flex">
                <viewCollectionArea class="num" :id="item.id">采集区域</viewCollectionArea>
                <ViewCollectionRequirements class="num" :planrequire="item.planRequire">采集要求</ViewCollectionRequirements>
                <TaskPerformance class="num" :planId="item.id">执行情况</TaskPerformance>
                <DataInventory class="num" :item="item">数据清单</DataInventory>
            </li>
            <li class="flex card">
                <div class="num">
                    <strong>图斑总数：</strong><span>{{ item.collectTaskLandRs[0].total }}</span>
                </div>
                <div class="num">
                    <strong>已审核：</strong><span>{{ item.collectTaskLandRs[0].auditStatusNum }}</span>
                </div>
                <div class="num">
                    <strong>已采集：</strong><span>{{ item.collectTaskLandRs[0].collectNum }}</span>
                </div>
                <div class="num">
                    <strong>未采集：</strong><span>{{ item.collectTaskLandRs[0].noCollectNum }}</span>
                </div>
            </li>
        </ul>
    </el-card>
    <el-divider content-position="center" v-if="showMore" :loading="!showMore" @click="more">点击加载更多</el-divider>
    <el-divider v-else content-position="center">我是有底线的</el-divider>
</div>
</template>

<script>
import {
    mapState
} from 'vuex';
export default {
    name: "acquisition-task",
    props: {
        status: {
            type: String,
            default: "underway",
        },
        currentTask: {
            type: Object,
            default: function () {
                return {};
            },
        },
        userInfo: {
            required: true,
            type: Object,
            default: function () {
                return {}
            }
        },
        PropsLoading: {
            type: Boolean,
            default: false,
        },
        random: {
            type: Number,
        }
        // taskObject: {
        //     type: Object,
        // },
    },
    data() {
        return {
            loadmore: true,
            showMore: false,
            loading: this.PropsLoading,
            taskList: [],
            params: {
                pageNumber: 1,
                pageSize: 4,
                planStatus: 2,
                isExpire: 0,
                collectStatus: 1,
            },
        };
    },
    components: {
        DataInventory: () => import("./DataInventory/DataInventory.vue"),
        TaskPerformance: () => import("./TaskPerformance/TaskPerformance.vue"),
        viewCollectionArea: () =>
            import("./viewCollectionArea/viewCollectionArea.vue"),
        ViewCollectionRequirements: () =>
            import("./ViewCollectionRequirements/ViewCollectionRequirements.vue"),
    },
    watch: {
        PropsLoading() {
            this.loading = this.PropsLoading;
        },
        random(){
            this.getQueryMyPlan()
        }
        // "taskObject.pvCode": {
        //     handler(o, n) {
        //         this.getQueryMyPlan()
        //     },
        //     deep: true
        // }
        // "currentTask.data.id":{
        //     hander(o,n){
        //       if(o!=n){
        //         console.log(o,n)
        //         this.handleCurrentTask(currentTask.data)
        //       }
        //     },
        //     deep:true
        // }
    },
    computed: {
        ...mapState({
            taskObject: (state) => {
                return state.taskmodel.taskObject;
            },
        }),
        filterTaskList: {
            get() {
                return this.taskList;
            },
            set(arr) {
                this.taskList = arr;
            },
        },
    },

    methods: {
        more() {
            this.params.pageSize += 5;
            this.getQueryMyPlan().then((res) => {
                if (res.total <= this.params.pageSize) {
                    this.showMore = false;
                }
            });
        },
        handleScroll(e) {
            console.log(e);
        },
        handleCurrentTask(item) {
            this.loading = true;
            this.$axios
                .get("task/task/getAListOfPlans?planInfo.Id=" + item.id)
                .then((res) => {
                    if (res.errorCode === "00000") {
                        this.$store
                            .dispatch("currentTask/setAsyncCurrentTask", {
                                data: res.data.list[0],
                                value: item,
                            })
                            .then((res) => {
                                let list = res.taskArray.treeData.list;
                                let xy = list.filter((item) => {
                                    return item.latitude && item.dimensionality;
                                });
                                let latitude, dimensionality;
                                if (xy instanceof Array && xy.length) {
                                    latitude = xy[0].latitude;
                                    dimensionality = xy[0].dimensionality;
                                } else {
                                    this.$message({
                                        message: "村中心经纬度缺失,自动定位到区中心点",
                                        type: "warning",
                                        duration: 2500,
                                    });
                                    latitude = 113.0179631;
                                    dimensionality = 23.059959;
                                }

                                this.$emit("filterMap", {
                                    planId: res.taskArray.id,
                                    taskArray: res.taskArray,
                                    list: list,
                                    center: [latitude, dimensionality],
                                    zoom: 14,
                                    status: "success",
                                });
                            });

                        // this.loading = false
                    }
                });
        },
        getQueryMyPlan() {
            if (localStorage.getItem("SYS_TYPE")) {
                this.params.systemTypeList = localStorage.getItem("SYS_TYPE");
                if (this.status === "underwayend") {
                    this.params.isExpire = 1;
                    delete this.params.collectStatus;
                }
                return this.$axios
                    .get("task/task/queryMyPlan", {
                        params: this.params,
                    })
                    .then((res) => {
                        if ((res.errorCode = "00000")) {
                            this.taskList = res.data.list;
                            if (!this.currentTask.data.planName) {
                                console.log(this.taskObject.pvCode, this.userInfo.userLevel);
                                // if (this.taskObject.pvCode === "P11101" || this.userInfo.userLevel > 3) {
                                //     // 处于任务执行模式下运行
                                //     this.handleCurrentTask(this.taskList[0]);
                                // }
                                if (this.taskObject.pvCode === "P11101") {
                                    // 处于任务执行模式下运行
                                    this.handleCurrentTask(this.taskList[0]);
                                }
                            }
                        }
                        this.showMore = true;
                        return Promise.resolve(res.data);
                    });
            }
        },
    },
    created() {
        this.getQueryMyPlan();
    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll);
    },
};
</script>

<style lang="scss">
.acquisition-task {
    .el-divider {
        cursor: pointer;
    }

    .planList {
        font-size: 14px;
        margin-bottom: 10px;
        padding-bottom: 0px;

        h1 {
            padding: 5px 0;
            font-weight: bold;
        }

        .title {
            padding: 0 10px;
            font-size: 14px;
            text-overflow: ellipsis;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            width: 100%;
        }

        .el-card__body {
            padding: 0px 10px;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;

            li {
                line-height: 25px;
            }

            .card {
                background: rgba(100, 100, 100, 0);
                border-radius: 5px;
                padding: 0px 5px;
            }

            .flex {
                margin: 10px 0;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                >.num {
                    box-sizing: border-box;
                    margin: 1px 0;
                    display: block;
                    width: 50%;

                    strong {
                        display: inline-block;
                        width: 80px;
                        text-align: right;
                        color: #666;
                    }
                }
            }
        }
    }
}
</style>
